<%@ include file="/common/taglibs.jsp"%>

<head>
    <title><fmt:message key="topeform.title"/></title>
    <meta name="heading" content="<fmt:message key='topeform.heading'/>"/>
</head>

<spring:bind path="clienteempresa.*">
    <c:if test="${not empty status.errorMessages}">
    <div class="error">
        <c:forEach var="error" items="${status.errorMessages}">
            <img src="<c:url value="/images/iconWarning.gif"/>"
                alt="<fmt:message key="icon.warning"/>" class="icon"/>
            <c:out value="${error}" escapeXml="false"/><br />
        </c:forEach>
    </div>
    </c:if>
</spring:bind>

<form:form commandName="clienteempresa" method="post" action="topesform.html" 
			onsubmit="return onFormSubmit(this)" id="clienteempresaform">
<form:hidden path="id" id="idCliente"/>
<ul>
    <li class="buttonBar right">
        <%-- So the buttons can be used at the bottom of the form --%>
        <c:set var="buttons">
	        <c:if test="${clienteempresa.stClienteEmpresa==true}" > 
	            <input type="button"  class="button"  onclick="agregaRow()"
			        value="<fmt:message key="button.save"/>"/>   
	
			    <input type="button"  class="button"  onclick="limpiar()"
			        value="<fmt:message key="button.limpiar"/>"/>  
			</c:if>
					               	
		    <input type="button"  class="button"  onclick="location.href='<c:url value="/topes/topeslist.html?from=list"/>'"
		        value="<fmt:message key="button.cancel"/>"/>             
        </c:set>        

        
    </li>

    
 
    <li>
    <label class="desc"><fmt:message key="clienteempresaform.title"/></label>
    <div class="group" style="width: 400px">

	<div>
        <label for="deClienteEmpresa" class="required desc">
        <fmt:message key="clienteempresaform.razonsocial"/>
        </label>
        <form:errors path="deClienteEmpresa" cssClass="fieldError"/>
		<form:hidden path="deClienteEmpresa" id="deClienteEmpresaID" />
		${clienteempresa.deClienteEmpresa}
    </div>
    
	<div>
        <label for="coRuc" class="required desc">
        <fmt:message key="clienteempresaform.ruc"/>
        </label>
        <form:errors path="coRuc" cssClass="fieldError"/>
		<form:hidden path="coRuc" id="coRucID" />
		${clienteempresa.coRuc}
    </div>    
    
	<div>
        <label for="deAlias" class="required desc">
        <fmt:message key="clienteempresaform.alias"/>
        </label>
        <form:errors path="deAlias" cssClass="fieldError"/>
		<form:hidden path="deAlias" id="deAliasID" />
		${clienteempresa.deAlias}
    </div>       
    
	<div>
        <label for="coTipoLineaCredito" class="required desc">
        <fmt:message key="clienteempresaform.tipo.linea"/>
        </label>
		<c:choose>
			<c:when test="${clienteempresa.lineaCredito.coTipoLineaCredito == 'R'}">
				<fmt:message key='tipolineacredito.prepago'/>
			</c:when>
			<c:when test="${clienteempresa.lineaCredito.coTipoLineaCredito == 'A'}">
				<fmt:message key='tipolineacredito.postpagoabierta'/>
			</c:when>									
			<c:when test="${clienteempresa.lineaCredito.coTipoLineaCredito == 'C'}">
				<fmt:message key='tipolineacredito.postpagocerrada'/>
			</c:when>																		
			<c:otherwise>
				<fmt:message key="label.itemdefault"/>	
			</c:otherwise>
		</c:choose>
	</div>   

	<div>
        <label for="deVaLineaCredito" class="required desc">
        <fmt:message key="clienteempresaform.valor.linea"/>
        </label>
        <form:errors path="lineaCredito.vaLineaCredito" cssClass="fieldError"/>
		<form:hidden path="lineaCredito.vaLineaCredito" id="lineaCredito.vaLineaCreditoID" />
		
		<c:choose>
		  <c:when test="${not empty clienteempresa.lineaCredito.vaLineaCredito}">
		  	${clienteempresa.lineaCredito.vaLineaCredito}
		  </c:when>
		  <c:otherwise>
		  	<fmt:message key="label.itemdefault"/>
		  </c:otherwise>
	    </c:choose>      
    </div>    
    </div>
    </li>
  	<c:if test="${clienteempresa.stClienteEmpresa==true}" >
    <li>
	   <fieldset style="width: 400px">
	    	<legend><fmt:message key='topeform.heading'/></legend>
	    	
				<div>
			        <label for="deTope" class="required desc">
			        <fmt:message key="topeform.tope"/><span class="req">*</span>
			        </label>
			        <form:errors path="tope.deTope" cssClass="fieldError"/>
					<form:input path="tope.deTope" id="tope.deTopeID"  maxlength="50" cssClass="text medium"/>
					<input type="hidden" name="idID" id="idID" value ="-1"   />
			    </div>    
			    
				<div>
			        <label for="vaPorcentaje" class="required desc">
			        <fmt:message key="topeform.porcentaje"/><span class="req">*</span>
			        </label>
			        <form:errors path="tope.vaPorcentaje" cssClass="fieldError"/>
					<form:input path="tope.vaPorcentaje" id="tope.vaPorcentajeID" maxlength="10" cssClass="text medium" onblur="calculaTotales()"/> <fmt:message key="common.porcentaje"/>
			    </div>       
			    
				<div>
			        <label for="coTipoTope" class="required desc">
			        <fmt:message key="topeform.tipotope"/><span class="req">*</span>
			        </label>
			        <form:errors path="tope.stTipoTope" cssClass="fieldError"/>
			        
			         <form:select cssClass="text medium"	id="tope.stTipoTopeID" path="tope.stTipoTope"   >
								<form:option value="V"><fmt:message key="tipotopeform.verde"/></form:option>
								<form:option value="A"><fmt:message key="tipotopeform.ambar"/></form:option>				
								<form:option value="R"><fmt:message key="tipotopeform.rojo"/></form:option>
					</form:select>
			    </div>      	
				<div>
			        <label for="vaMontoCalculado" class="required desc">
			        <fmt:message key="topeform.montocalculado"/>
			        </label>
			        <form:errors path="tope.vaMontoCalculado" cssClass="fieldError"/>
					<form:hidden path="tope.vaMontoCalculado" id="tope.vaMontoCalculadoID" />
					<span id="flagVaMontoCalculado"> 0.0</span>
			    </div>     	
			    <div>
			    <br>
				        <c:out value="${buttons}" escapeXml="false"/>
			    </div>
	   </fieldset>
    </li>
    </c:if>
    <c:if test="${clienteempresa.stClienteEmpresa!=true}" >
     		<c:out value="${buttons}" escapeXml="false"/>
    </c:if>
    
     <li> 
		<table id="topes" style ="width: 700px" class="table" > 
			<thead> 
				<tr>
		            <th scope="col" width="30%"><fmt:message key="topeform.tope"/></th>
		            <th scope="col" width="15%"><fmt:message key="topeform.porcentaje"/></th>
		            <th scope="col" width="20%"><fmt:message key="topeform.montocalculado"/></th>
		            <th scope="col" width="15%"><fmt:message key="topeform.tipoalerta"/></th>
		            <c:if test="${clienteempresa.stClienteEmpresa==true}" >
		            <th scope="col" width="20%"><fmt:message key="common.opciones"/></th>
		            </c:if>
				</tr>
			</thead>
	
			<tbody id="topesbody">
					<tr id="patternTo" style="display:none;">
						<td> 
							<span id="tableTope">Tope</span>						
						</td>	
						<td> 
							<span id="tablePorcentaje">Porcentaje</span>						
						</td>
						<td> 
							<span id="tableMontoCalculado">MontoCalculado</span>						
						</td>						
						<td> 
							<span id="tableTipoAlerta">TipoAlerta</span>						
						</td>
						<td> 
							<span id="tableOpciones">Opciones</span>						
						</td>
					</tr>
					
					<c:if test="${not empty clienteempresa.topes}">
						<c:forEach var="tope" items="${clienteempresa.topes}" varStatus="status">
							  <tr id="patternTo${status.index + 1}">
								<td>
										${tope.deTope}            	
								</td>
								<td>
				                  		${tope.vaPorcentaje}<fmt:message key='common.porcentaje'/>	
				                </td>
								<td>
				                  		${tope.vaPorcentaje*clienteempresa.lineaCredito.vaLineaCredito/100}	
				                </td>				                
				                
								<td>
								<c:choose>
									<c:when test="${tope.stTipoTope == 'V'}">
											<fmt:message key='tipotopeform.verde'/>
									</c:when>
									<c:when test="${tope.stTipoTope == 'R'}">
											<fmt:message key='tipotopeform.rojo'/>
									</c:when>									
									<c:when test="${tope.stTipoTope == 'A'}">
											<fmt:message key='tipotopeform.ambar'/>
									</c:when>																		
									<c:otherwise>
											
									</c:otherwise>
								</c:choose>	
				                </td>		
				                <c:if test="${clienteempresa.stClienteEmpresa==true}" >		                
									<td>									
										<a href='javascript:deleteRow(${tope.id})'>Eliminar</a>
					                   	<a href="javascript:editRow(${tope.id},'${tope.deTope}', ${tope.vaPorcentaje},'${tope.stTipoTope}')">Editar</a>
																
					                </td>				                
				                </c:if>
				                				                
				           	</tr>								  
								  						
					 	</c:forEach>	
					</c:if>	
			</tbody>
			</table>    
			</li> 
	</ul>		
</form:form>

<script type="text/javascript">

function onFormSubmit(theForm) {
  	return validateClienteempresa(theForm);
}

function calculaTotales(){
	var vaPorcentaje = dwr.util.getValue("tope.vaPorcentajeID");
 	var lineaCredito = dwr.util.getValue("lineaCredito.vaLineaCreditoID");
 	var vaMontoCalculado = 0.0; 

	if((trim(vaPorcentaje) != '' && trim(lineaCredito) != '') &&	   
	   (!isNaN(vaPorcentaje) && !isNaN(lineaCredito))){

		vaPorcentaje = trim(vaPorcentaje);
		lineaCredito = trim(lineaCredito);

		
		vaMontoCalculado = parseFloat(vaPorcentaje) * parseFloat(lineaCredito)/100;
	}
	vaMontoCalculado = Math.round(vaMontoCalculado*100)/100 ;
	dwr.util.setValue("flagVaMontoCalculado", vaMontoCalculado, { escapeHtml:false });

}

function deleteRow(id){
    var msg = "<fmt:message key='clienteempresatopeform.comfirma.elimina'/>";
    ans = confirm(msg);
    if (ans){
      	dwr.util.useLoadingMessage();
      	TopeService.eliminarTope(id, function(resultado) {
      		listRow(true);
        });
    }
}

function editRow(id, deTope, vaPorcentaje,tipoTope){
	dwr.util.useLoadingMessage();
	dwr.util.setValue("idID", id);
	dwr.util.setValue("tope.deTopeID", deTope);
	dwr.util.setValue("tope.vaPorcentajeID", vaPorcentaje);
	dwr.util.setValue("tope.stTipoTopeID", tipoTope);
	calculaTotales();
}

function agregaRow(){
	
	var idCliente = dwr.util.getValue("idCliente");  	
	var id =	dwr.util.getValue("idID");
	var deTope	 = dwr.util.getValue("tope.deTopeID");
	var vaPorcentaje = dwr.util.getValue("tope.vaPorcentajeID");
	var stTipoTope = dwr.util.getValue("tope.stTipoTopeID");
	
	var nomPorcentanje = "Porcentaje";
	var nomTope = "Tope";
	var montoCalculado = 0; 
	
	if(deTope.length==0){
		 alert("<fmt:message key='clienteempresaform.error.tope.tope.requerido'/>");
		 document.getElementById("tope.deTopeID").focus();
		 return false;
	}		
	
	if(vaPorcentaje.length==0){
		 alert("<fmt:message key='clienteempresaform.error.tope.porcentaje.requerido'/>");
		 document.getElementById("tope.vaPorcentajeID").focus();
		 return false;
	}else if(isNaN(vaPorcentaje)){
		 alert("<fmt:message key="common.validar.noNumero"><fmt:param value='"+nomPorcentanje+"'/></fmt:message>");
		 document.getElementById("tope.vaPorcentajeID").focus();
		 return false;
	}

	dwr.util.useLoadingMessage();
	TopeService.guardarTopeVista(id,deTope,stTipoTope,idCliente, vaPorcentaje, function(dato) { 

		if(dato == -1){
			alert('El cliente ya tiene asignado un tope del tipo Rojo.');
			listRow(false);
		}else if(dato == -2){
			alert('Existe un tope de tipo superior con porcentaje menor o igual al dado.');
			listRow(false);
		}else if(dato == -3){
			alert('Existe un tope de tipo inferior con porcentaje mayor o igual al dado.');
			listRow(false);
		}else{
			listRow(true);
		}
	});
}    

function listRow(vboolean){
	
	var idCliente = dwr.util.getValue("idCliente");
	var vaLineaCredito = dwr.util.getValue("lineaCredito.vaLineaCreditoID");  	
	if (idCliente != ""){

		dwr.util.useLoadingMessage();
		TopeService.obtenerTopes(idCliente, function(topes) {
			
    	    dwr.util.removeAllRows("topesbody", { filter:function(tr) {
      	      return (tr.id != "patternTo");
      	    }});

    	    if (null !=topes){
	        	if (topes.length>0){
		    	    // Create a new set cloned from the pattern row
		    	    for (var i = 0; i < topes.length; i++) {
		    	    	tope = topes[i];			
		    	      	dwr.util.cloneNode("patternTo",  { idSuffix:(i + 1) });

		    	      	dwr.util.setValue("tableTope" + (i+1),  tope.deTope, { escapeHtml:false });
		    	      	dwr.util.setValue("tablePorcentaje" + (i+1),  tope.vaPorcentaje + '<fmt:message key='common.porcentaje'/>', { escapeHtml:false });
		    	      	dwr.util.setValue("tableMontoCalculado" + (i+1),  tope.vaPorcentaje * vaLineaCredito/100, { escapeHtml:false });
		    	      	

								if (tope.stTipoTope == 'V') {
									dwr.util.setValue("tableTipoAlerta" + (i+1),  '<fmt:message key='tipotopeform.verde'/>'	, { escapeHtml:false });
								}
								if (tope.stTipoTope == 'R') {
									dwr.util.setValue("tableTipoAlerta" + (i+1),  '<fmt:message key='tipotopeform.rojo'/>'	, { escapeHtml:false });
								}
								if (tope.stTipoTope == 'A') {
									dwr.util.setValue("tableTipoAlerta" + (i+1),  '<fmt:message key='tipotopeform.ambar'/>'	, { escapeHtml:false });
								}

		    	      
		    	      	dwr.util.setValue("tableOpciones" + (i+1), 
				                   " <a href='javascript:deleteRow(" + tope.id + ")'>Eliminar</a> " + 
				                   "<a href='javascript:editRow(" + tope.id + ", \"" + tope.deTope + "\", " + tope.vaPorcentaje + ",\"" + tope.stTipoTope + "\")'>Editar</a> " 

    			    	      	, { escapeHtml:false });
									    	      	

			     	    $("patternTo" + (i + 1)).style.display = "";			    	     
			    	      
		    	    }	
	            }
           	}	    	    
		});	
	}

	if(vboolean){
		dwr.util.setValue("tope.deTopeID", "");
		dwr.util.setValue("idID", "-1");
		dwr.util.setValue("tope.vaPorcentajeID", "");
		dwr.util.setValue("tope.stTipoTopeID", "V");
		dwr.util.setValue("flagVaMontoCalculado", "0.0");
	}
} 

function limpiar(){
	dwr.util.setValue("tope.deTopeID", "");
	dwr.util.setValue("idID", "-1");
	dwr.util.setValue("tope.vaPorcentajeID", "");
	dwr.util.setValue("tope.stTipoTopeID", "V");	
	dwr.util.setValue("flagVaMontoCalculado", "0.0");	
}

</script>
<v:javascript formName="clienteempresa" staticJavascript="false"/>

<script type="text/javascript" src="<c:url value="/scripts/validator.jsp"/>"></script>
<script type='text/javascript' src="<c:url value="/dwr/interface/TopeService.js"/>"></script>
